<template>
  <q-layout view="hHh lpr lFf">
    <!-- 进度条 -->
    <q-ajax-bar ref="ajaxBar" color="red" size="14px" position="top" />
    <!-- 头部 -->
    <HeaderPage v-model:leftDrawerOpen="leftDrawerOpen" />
    <!-- 侧边 -->
    <MenuPage v-model:leftDrawerOpen="leftDrawerOpen" />
    <!-- 内容 -->

    <q-page-container>
      <router-view v-slot="{ Component }">
        <!-- <transition appear enter-active-class="animated fadeInLeftBig"> -->
        <keep-alive :include="tabsStore.cacheViews">
          <component :is="Component" :key="$route.name" />
        </keep-alive>
        <!-- </transition> -->
      </router-view>
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
defineOptions({
  name: 'MainLayoutPage',
})
import { ref } from 'vue'
import HeaderPage from 'layouts/header/index.vue'
import MenuPage from 'layouts/menu/index.vue'
import { useTabsStore } from 'src/stores/tabsStore'

const tabsStore = useTabsStore()
const leftDrawerOpen = ref(true)
</script>

<style>
/* 让离场节点不占高度 */
.fadeOutLeftBig-leave-active {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.max-h {
  height: calc(100vh - 200px);
}
</style>
